<template>
  <main :class="{ warm: weather.temp > 16, cold: weather.temp <= 16 }">
    <div class="search-box">
      <input
        type="text"
        class="search-bar"
        v-model="query"
        @blur="handleSearch"
      />
    </div>
    <div class="weather-wrap" v-show="!error.state">
      <div class="location-box">
        <div class="location">{{ city.name }}</div>
        <div class="date">{{ time }}</div>
      </div>
      <div class="weather-box">
        <div class="temp">{{ weather.temp }}℃</div>
        <div class="weather">{{ weather.text }}</div>
      </div>
    </div>
    <div class="error-wrap" v-show="error.state">
      {{ error.msg }}
    </div>
  </main>
</template>

<script>
import dayjs from 'dayjs';
import LocalizedFormat from 'dayjs/plugin/localizedFormat';
import { ref, reactive, onMounted } from 'vue';
import useCity from './hooks/useCity';
import useWeather from './hooks/useWeather';
dayjs.extend(LocalizedFormat);
export default {
  name: 'App',
  setup() {
    const api_key = '02c0a1f8e9344507a8611141bfd91bde';
    const query = ref('北京');
    const error = reactive({
      state: false,
      msg: '',
    });
    const time = ref(dayjs().format('LLL'));
    const { city, fetchCity } = useCity(query, api_key, error);
    const { weather, fetchWeather } = useWeather(city, api_key, error);
    onMounted(() => {
      fetchCity()
        .then(() => {
          fetchWeather().catch((err) => console.log(err));
        })
        .catch((err) => {
          console.log(err);
        });
    });
    const handleSearch = () => {
      time.value = dayjs().format('LLL');
      fetchCity()
        .then(() => {
          fetchWeather().catch((err) => console.log(err));
        })
        .catch((err) => {
          console.log(err);
        });
    };
    return {
      query,
      weather,
      handleSearch,
      city,
      error,
      time,
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  max-width: 800px;
}
main {
  min-height: 100vh;
  width: 100%;
  padding: 0.15rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.warm {
  background-image: url(./assets/warm-bg.jpg);
}

.cold {
  background-image: url(./assets/cold-bg.jpg);
}
.cold .search-bar {
  color: #000;
}
.search-bar {
  display: block;
  width: 100%;
  padding: 0.15rem;

  border: none;
  outline: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0 0.16rem 0 0.16rem;
  transition: all 0.4s;
  color: #fff;
}
.search-bar:focus {
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 0.16rem 0 0.16rem 0;
}
.weather-wrap {
  margin-top: 0.1rem;
  text-align: center;
}
.location-box {
  color: #fff;
}
.location-box .location {
  font-size: 0.32rem;
  font-weight: 500;
  text-shadow: 1px 3px rgba(0, 0, 0, 0.25);
}
.location-box .date {
  font-size: 0.2rem;
  line-height: 0.4rem;
  font-style: italic;
}
.weather-box .temp {
  display: inline-block;
  padding: 0.15rem 0.25rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 0.16rem;
  font-size: 1.02rem;
  font-weight: 900;
  text-shadow: 3px 6px rgba(0, 0, 0, 0.25);
}
.weather-box .weather {
  font-size: 0.62rem;
  font-style: italic;
}
.error-wrap {
  font-size: 0.62rem;
  color: #fff;
  text-align: center;
  margin-top: 0.2rem;
}
</style>
